import React, { useState, useEffect } from 'react';
import { Menu, Dropdown } from 'antd';
import { useRouter } from 'next/router';
import Link from 'next/link';
import Cookies from "js-cookie";
import emitter from '@/events';
import { isLogin } from '@/routes_auth';
// 图片
import gzhImg from "@/public/imgs/gzh.png";

const Head = () => {
    
    const router = useRouter();
    const [userInfo, setUserInfo] = useState({});
    const [isLogged, setIsLogged] = useState(false);
    // 从cookie中获取用户信息
    useEffect(() => {

        setIsLogged(isLogin());
        setUserInfo(JSON.parse(Cookies.get('userInfo') || '{}'));

        // 初始化，去掉所有events
        emitter.removeAllListeners(['updateNickname']);
        // 添加event
        emitter.on('updateNickname', () => {
            setUserInfo(JSON.parse(Cookies.get('userInfo') || '{}'))
        });
        return function (){
            emitter.removeAllListeners(['updateNickname'])
        }
    }, []);
    
    // fn：退出登录
    const logout = () => {
        Cookies.remove('token');
        Cookies.remove('userInfo');
        location.href = process.env.basePath || "/";
    }

     // 登录后
     const menu = (
        <Menu>
            <Menu.Item onClick={() => { router.push('/personal') }} key="1">个人中心</Menu.Item>
            <Menu.Item onClick={() => { router.push('/personal/order') }} key="2">我的订单</Menu.Item>
            <Menu.Item onClick={() => { logout() }} key="3">退出</Menu.Item>
        </Menu>
    )

    return (
        <div className="head">
            <div className="max-content bar">
                <ul className="bar bar-left">
                    <li>西藏旅游欢迎您！</li>
                    {
                        !isLogged
                        ? <>
                            <li><Link href="/login" prefetch={false}><a>登录</a></Link></li>
                            <li className="line">|</li>
                            <li><Link href="/login" prefetch={false}><a>注册</a></Link></li>
                          </>
                        : <li className="logined">
                            <Dropdown overlay={menu}>
                                <a className="ant-dropdown-link" onClick={e => e.preventDefault()}>
                                    { userInfo['nickname'] || userInfo['phone'] } <span className="iconfont icon-xialajiantouxiao"></span>
                                </a>
                            </Dropdown>
                          </li>
                    }
                </ul>
                <ul className="bar bar-right">
                    <li className="order">
                        <Link href="/personal/order" prefetch={false}>
                            <a><span className="iconfont icon-dingdanjihe"></span>我的订单</a>
                        </Link>
                    </li>
                    <li className="line">|</li>
                    <li className="cart">
                        <Link href="/shopping_cart" prefetch={false}>
                            <a><span className="iconfont icon-gouwuche"></span>购物车</a>
                        </Link>
                    </li>
                    <li className="line">|</li>
                    <li className="gzh">
                        <span>公众号</span>
                        <div>
                            <p>扫码关注，优惠多多</p>
                            <img src={process.env.basePath + gzhImg.src} alt="" />
                        </div>
                    </li>
                    <li className="line">|</li>
                    <li className="gzh">
                        <Link href="/about_us/map" prefetch={false}>
                            <a target="_blank">网站地图</a>
                        </Link>
                    </li>
                </ul>
            </div>
        </div>
    )
}

export default Head